<template>
  <div
    class="cdwrap"
    :class="{ cdani: cdani }"
    ref="wrapref"
    :style="wrapstyle"
  >
    <img
      ref="rotateimg"
      :class="{ rotate: playing }"
      :src="currentsong.pic"
      alt=""
    />
  </div>
</template>

<script>
import { computed, watch, ref, reactive } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'Rotated',
  props: {
    currentsong: Object
  },
  setup (props) {
    const rotateimg = ref(null)
    const wrapref = ref(null)
    const store = useStore()
    const playing = computed(() => store.state.playing)
    const wrapstyle = reactive({})
    watch(playing, (val) => {
      if (!val) {
        const rotateimgarr = getComputedStyle(rotateimg.value)
        const wraparr = getComputedStyle(wrapref.value)
        wrapref.value.style.transform =
          wraparr.transform === 'none'
            ? rotateimgarr.transform
            : rotateimgarr.transform.concat(' ', wraparr.transform)
      }
    })
    // cd出场动画
    const cdani = ref(false)
    const fullscreen = computed(() => store.state.fullscreen)
    watch(fullscreen, (newv) => {
      cdani.value = newv
    })
    return { playing, rotateimg, wrapref, wrapstyle, cdani }
  }
}
</script>

<style scoped lang="scss">
.rotate {
  animation: move 15s infinite linear;
}
@keyframes move {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.cdani {
  animation: cdmov 1.2s 1;
}
.cdwrap {
  width: 80%;
  height: 300px;
  position: absolute;
  left: 10%;
  border: 10px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  overflow: hidden;
  & > img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
